## Step 2: register plugin

After the dependency installation, you need to integrate the Rsdoctor plugin into your project. Below are some examples of common tools and frameworks:

### Rspack

Initialize the RsdoctorRspackPlugin in the [plugins](https://www.rspack.rs/config/plugins.html#plugins) of `rspack.config.js`:

```js title="rspack.config.js"
const { RsdoctorRspackPlugin } = require('@rsdoctor/rspack-plugin');

module.exports = {
  // ...
  plugins: [
    // Only register the plugin when RSDOCTOR is true, as the plugin will increase the build time.
    process.env.RSDOCTOR &&
      new RsdoctorRspackPlugin({
        // plugin options
      }),
  ].filter(Boolean),
};
```

- **Options:** The plugin provides some configurations, please refer to [Options](../../config/options/options).

### Rsbuild

Rsbuild has built-in support for Rsdoctor, so you don't need to manually register plugins. See [Rsbuild - Use Rsdoctor](https://rsbuild.rs/guide/debug/rsdoctor) for more details.

### Webpack

Initialize the RsdoctorWebpackPlugin in the [plugins](https://webpack.js.org/configuration/plugins/#plugins) of `webpack.config.js`:

```js title="webpack.config.js"
const { RsdoctorWebpackPlugin } = require('@rsdoctor/webpack-plugin');

module.exports = {
  // ...
  plugins: [
    // Only register the plugin when RSDOCTOR is true, as the plugin will increase the build time.
    process.env.RSDOCTOR &&
      new RsdoctorWebpackPlugin({
        // plugin options
      }),
  ].filter(Boolean),
};
```

- **Options:** The plugin provides some configurations, please refer to [Options](../../config/options/options).

### Modern.js

Initialize the plugin in the [tools.rspack](https://modernjs.dev/configure/app/tools/rspack) of `modern.config.ts`:

```ts title="modern.config.ts"
import { RsdoctorRspackPlugin } from '@rsdoctor/rspack-plugin';

export default {
  // ...
  tools: {
    rspack(config, { appendPlugins }) {
      // Only register the plugin when RSDOCTOR is true, as the plugin will increase the build time.
      if (process.env.RSDOCTOR) {
        appendPlugins(
          new RsdoctorRspackPlugin({
            // plugin options
          }),
        );
      }
    },
  },
};
```

- **Options:** The plugin provides some configurations, please refer to [Options](../../config/options/options).

:::tip
For projects using Modern.js's webpack mode, please register the `RsdoctorWebpackPlugin` plugin through [tools.webpack](https://modernjs.dev/configure/app/tools/webpack).
:::

### Next.js

#### Step 1: Register the Rsdoctor plugin

Initialize the [RsdoctorRspackPlugin](#rspack-projects)([RsdoctorWebpackPlugin](#webpack-projects)) plugin in the [Rspack Config](https://rspack.rs/guide/tech/next)([webpack config](https://nextjs.org/docs/pages/api-reference/config/next-config-js/webpack)) of `next.config.ts`.

import { Tab, Tabs } from '@rspress/core/theme';

<Tabs>

<Tab label="Rspack">

```ts title="next.config.ts"
import type { NextConfig } from 'next';
import { RsdoctorRspackPlugin } from '@rsdoctor/rspack-plugin';

const nextConfig: NextConfig = {
  /* config options here */
  webpack: (config) => {
    if (config.name === 'client') {
      config.plugins.push(
        new RsdoctorRspackPlugin({
          disableClientServer: true,
        }),
      );
    } else if (config.name === 'server') {
      config.plugins.push(
        new RsdoctorRspackPlugin({
          disableClientServer: true,
          output: {
            reportDir: './.next/server',
          },
        }),
      );
    }
    return config;
  },
};

export default nextConfig;
```

</Tab>

<Tab label="webpack">

```ts title="next.config.ts"
import type { NextConfig } from 'next';
import { RsdoctorWebpackPlugin } from '@rsdoctor/webpack-plugin';

const nextConfig: NextConfig = {
  /* config options here */
  webpack: (config) => {
    if (config.name === 'client') {
      config.plugins.push(
        new RsdoctorWebpackPlugin({
          disableClientServer: true,
        }),
      );
    } else if (config.name === 'server') {
      config.plugins.push(
        new RsdoctorWebpackPlugin({
          disableClientServer: true,
          output: {
            reportDir: './.next/server',
          },
        }),
      );
    }
    return config;
  },
};

export default nextConfig;
```

</Tab>
</Tabs>

- **Options:** The plugin provides some configuration options, please refer to [Options](../../config/options/options).

#### Step 2: Execute build

Execute the **build** command, Rsdoctor will generate the corresponding report data in the local repository artifacts.

import { PackageManagerTabs } from '@theme';

<PackageManagerTabs command="run build" />

#### Step 3: Open the report

After installing [@rsdoctor/cli](/guide/start/cli), add the following scripts commands to **package.json**, executing **client:rsd** or **server:rsd** can open the report of the corresponding builder:

<PackageManagerTabs command="add @rsdoctor/cli -D" />

```ts
  "scripts": {
    "client:rsd": "rsdoctor analyze --profile .next/.rsdoctor/manifest.json", // Rsdoctor's client report
    "server:rsd": "rsdoctor analyze --profile .next/server/.rsdoctor/manifest.json" // Rsdoctor's server report
  }
```

#### 📢 Note for Next.js

After Next.js finishes executing the `build` command, it will terminate the terminal service, causing the report page server run by Rsdoctor during the build process to close. To solve this problem, you can use [@rsdoctor/cli](/guide/start/cli) to reopen the report page without re-executing the build operation. The specific method is shown in the [third step](#step-3-open-the-report) or by locally executing the rsdoctor command:

For example, if Rsdoctor's build output is located at the path `.next/server/chunks/.rsdoctor/manifest.json`, you can open the report page by executing the following command:

```bash
rsdoctor analyze --profile .next/server/chunks/.rsdoctor/manifest.json

```

### Vue project

Initialize the `@rsdoctor/webpack-plugin` or `@rsdoctor/rspack-plugin` plugin in the configuration file. Here is an example using `rsbuild`:

```ts title="rsbuild.config.ts"
import { defineConfig } from '@rsbuild/core';
import { pluginVue } from '@rsbuild/plugin-vue';
import { RsdoctorRspackPlugin } from '@rsdoctor/rspack-plugin';

export default defineConfig({
  plugins: [pluginVue()],
  performance: {
    buildCache: false,
  },
  tools: {
    bundlerChain: (chain, { CHAIN_ID }) => {
      chain.plugin('Rsdoctor').use(RsdoctorRspackPlugin, [
        {
          // plugin options
        },
      ]);
    },
  },
});
```

- **Options:** The plugin provides some configurations, please refer to [Options](../../config/options/options).

---

## Step 3: Execute build

Now, you can run the **build** command in the project. After the build is complete, Rsdoctor will automatically open the analysis page of this build.

```bash
# Enable Rsdoctor
RSDOCTOR=true npm run build

# Disable Rsdoctor
npm run build
```

:::tip
The Rsdoctor plugin provides some configurations, please refer to [Options](../../config/options/options).
:::
